<template>

  <div class="managementrouter home">
    <el-row style="" class="title-Breadcrumb">
      <span style="padding: 0;" class="font26">ManageMent</span>
      <!--    主页内容中那四个框-->
    </el-row>

    <div class="ConditionScreening">
      <el-row>

        <el-form ref="form">
          <el-form-item label="条件筛选" class="ConditionScreeninglab">

            <el-radio-group v-model="radio1">
              <el-radio-button label="1">列表式</el-radio-button>
              <el-radio-button label="2">卡片式</el-radio-button>
            </el-radio-group>

          </el-form-item>

          <el-divider></el-divider>

          <el-row>
            <el-col :xs="12" :md="6">
              <el-form-item label="活动名称：">
                <el-col :span="18">
                  <el-input v-model="form.name" placeholder="请选择活动名称"></el-input>
                </el-col>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :md="6">
              <el-form-item label="活动编号：">
                <el-col :span="18">
                  <el-input v-model="form.name" placeholder="请输入活动编号" style="width: 100%"></el-input>
                </el-col>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :md="6">
              <el-form-item label="活动类型：">
                <el-col :span="18">
                  <el-select v-model="form.region" placeholder="请选择活动类型" style="width: 100%">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                  </el-select>
                </el-col>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :md="6">
              <el-form-item label="活动状态：">
                <el-col :span="18">
                  <el-select v-model="form.region" placeholder="请选择活动状态" style="width: 100%">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                  </el-select>
                </el-col>
              </el-form-item>
            </el-col>
          </el-row>


          <el-row :gutter="10">

            <el-col :xs="12" :md="4">
              <el-form-item label="活动区域：">
                <el-col :span="15">
                  <el-select v-model="form.region" placeholder="省">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                  </el-select>
                </el-col>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :md="2">

              <el-select v-model="form.region" placeholder="市">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>

            </el-col>
            <el-col :xs="12" :md="2">
              <el-select v-model="form.region" placeholder="县">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>

            </el-col>
            <el-col :xs="12" :md="6">

              <el-form-item label="活动时间：">
                <el-col :span="15">
                  <el-input v-model="form.name" placeholder="请输入活动时间"></el-input>
                </el-col>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :md="10">
              <el-row>
                <el-col :span="8" class="center">
                  <el-button class="btnform  btnreset">
                    重置
                  </el-button>
                </el-col>
                <el-col :span="8" class="center">
                  <el-button class="btnform  btnselect">
                    查询
                  </el-button>
                </el-col>
                <el-col :span="8" class="center">
                  <el-button class="btnform  btnadd">
                    新建
                  </el-button>
                </el-col>
              </el-row>


            </el-col>


          </el-row>
        </el-form>
        <el-divider></el-divider>
      </el-row>

    </div>

    <TabPaneLab :data="tabs" v-if="radio1 == 2"></TabPaneLab>
    <TabPaneList :data="tabs" v-if="radio1 == 1"></TabPaneList>

  </div>


</template>

<script>

  import TabPaneLab from "../../../components/TabPaneLab/TabPaneLab";
  import TabPaneList from "../../../components/TabPaneList";

  export default {
    name: "managementrouter",
    components: {
      TabPaneLab,
      TabPaneList
    },
    computed: {
      cachedViews() {
        return this.$store.state.tagsView.cachedViews
      },
      key() {
        return this.$route.path
      }
    },
    data() {
      return {
        radio1: "1",
        form: "",
        tabs: [{
          label: "待发布",
          name: "first",
          color: "#A3A1FB",
          data: 10
        }, {
          label: "报名中",
          name: "second",
          data: 1,
          color: "#FF6565"
        }, {
          label: "进行中",
          name: "third",
          color: "#5EE2A0",
          data: 5
        }, {
          label: "已完成",
          name: "fourth",
          color: "#43425D",
          data: 3
        }
        ]
      }
    }
  }
</script>


<style>
  .ConditionScreening .el-divider--horizontal {
    margin: 14px 0;
  }

  .ConditionScreening .el-input--medium .el-input__inner {
    height: 32px;
  }

  .ConditionScreening .el-radio-button__orig-radio:checked + .el-radio-button__inner {
    background-color: #43425D;
    border-color: #43425D;
    color: #FFFFFF;
    font-size: 14px;
  }

  .ConditionScreeninglab .el-form-item__label {
    font-size: 20px;
    color: #43425D;
    font-weight: 400;
    margin-right: 20px;
    padding-right: 0;
    text-align: left;
  }
</style>
<style scoped>
  .center {

    display: flex;
    justify-content: flex-end;
  }

  .btnform {
    width: 123px;
    height: 35px;
    opacity: 1;
    border-radius: 4px;
    border: #2C95FF solid 2px;
  }

  .btnreset {
    color: #2C95FF;
  }

  .btnselect {
    color: #2C95FF;
  }


  .btnadd {
    background: #2C95FF;
    color: #FFFFFF;
  }

  .ConditionScreeninglab {


  }

  .ConditionScreening {
    background: #FFFFFF;
    /*height: 286px;*/
    width: 100%;
    padding: 21px 22px 0 22px;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
  }

  .home {
    padding: 0 40px 40px 40px;
    background-color: #F5F3F7;
    width: 100%;
    height: 100%;
  }

  .title-Breadcrumb {
    padding: 25px 0 25px 20px;
  }

</style>
